<!--
 * @Author: zhangweinan
 * @Date: 2023-02-07 14:03:49
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-06-02 17:32:42
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\components\bpmnProcessDesigner\package\penal\config\ConditionNodeConfig.vue
-->
<template>
  <div>
    <!-- <div class="titleConfig">配置方式</div>
    <el-radio-group
      v-model="conditionConfigType"
      size="medium"
      class="conditionRadio"
    >
      <el-radio label="1">条件规则</el-radio>
      <el-radio label="2" disabled>公式</el-radio>
    </el-radio-group> -->
    <div>
      <div class="titleConfig">变量来源</div>
      <div class="conditionRadio">
        <el-select
          v-model="formData.formName"
          placeholder="请选择"
          @change="updateFormSelect"
        >
          <el-option
            v-for="item in conditionNodeData"
            :key="String(item.id)"
            :label="item.name"
            :value="String(item.id)"
          >
          </el-option>
        </el-select>
      </div>
      <div class="titleConfig">条件规则</div>
      <el-form ref="elForm" :model="formData" size="medium">
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label-width="0">
              <el-select
                v-model="formData.field"
                placeholder="请选择"
                @change="updateFieldSelect"
              >
                <el-option
                  v-for="item in fieldOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0">
              <el-select
                v-model="formData.condition"
                placeholder="请选择"
                @change="updateFieldSelect"
              >
                <el-option
                  v-for="item in conditionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label-width="0">
              <el-input
                v-if="
                  formData.condition == 'containsAny' ||
                  formData.condition == '=='
                "
                v-model="formData.value"
                placeholder="请输入单行文本"
                clearable
                :style="{ width: '100%' }"
                @change="updateFieldSelect"
              ></el-input>
              <el-input
                v-else
                type="number"
                v-model="formData.value"
                placeholder="请输入数字"
                clearable
                :style="{ width: '100%' }"
                @change="updateFieldSelect"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getForm } from "@/api/bpm/form.js";
export default {
  name: "ConditionNodeConfig",
  props: { id: String, conditionNodeData: Array },
  data() {
    return {
      conditionConfigType: "1",
      formData: {
        formName: "",
        field: "",
        condition: "",
        value: undefined,
      },
      fieldOptions: [],
      conditionOptions: [
        { label: "等于", value: "==" },
        { label: "不等于", value: "!=" },
        { label: "大于", value: ">" },
        { label: "大于等于", value: ">=" },
        { label: "小于", value: "<" },
        { label: "小于等于", value: "<=" },
        { label: "包含", value: "containsAny" },
      ],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetFormList());
      },
    },
  },
  methods: {
    //初始化配置
    resetFormList() {
      this.bpmnELement = window.bpmnInstances.bpmnElement;
      let { formValues, fieldValues, conditionValues, inputValues } =
        this.bpmnELement.businessObject;
      this.formData.formName = "";
      this.formData.condition = "";
      this.formData.field = "";
      this.formData.value = "";
      this.fieldOptions = [];
      this.formData.formName = formValues =
        formValues !== undefined ? formValues.toString() : "";
      formValues !== undefined &&
        formValues.length > 0 &&
        this.updateFormSelect(Number(this.formData.formName));
      this.formData.field = fieldValues;
      this.formData.condition = conditionValues;
      this.formData.value = inputValues;
      let field =
        this.formData.field !== undefined && this.formData.field.length > 0
          ? this.formData.field
          : "";
      let condition =
        this.formData.condition !== undefined &&
        this.formData.condition.length > 0
          ? this.formData.condition
          : "";
      let value =
        this.formData.value !== undefined && this.formData.value.length > 0
          ? this.formData.value
          : "";
      if (value == "" && condition == "" && field == "") {
        return;
      } else {
        let body =
          condition == "containsAny"
            ? "${var:containsAny(" + field + ",'" + value + "')}"
            : condition == "=="
            ? "${" + field + condition + "'" + value + "'}"
            : "${" + field + condition + value + "}";
        let result = window.bpmnInstances.moddle.create(
          "bpmn:FormalExpression",
          {
            body,
          }
        );
        window.bpmnInstances.modeling.updateProperties(
          window.bpmnInstances.bpmnElement,
          {
            conditionExpression: result,
          }
        );
      }
    },
    //触发表单选择事件
    updateFormSelect(formId) {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        formValues: formId,
      });
      getForm(formId).then((response) => {
        const data = response.data;
        if (data == null) {
          window.bpmnInstances.modeling.updateProperties(
            window.bpmnInstances.bpmnElement,
            {
              formValues: "",
            }
          );
          window.bpmnInstances.modeling.updateProperties(
            window.bpmnInstances.bpmnElement,
            {
              fieldValues: "",
            }
          );
          window.bpmnInstances.modeling.updateProperties(
            window.bpmnInstances.bpmnElement,
            {
              conditionValues: "",
            }
          );
          window.bpmnInstances.modeling.updateProperties(
            window.bpmnInstances.bpmnElement,
            {
              inputValues: "",
            }
          );
          this.resetFormList();
        } else {
          let { fields } = data;
          this.fieldOptions = fields.map((item) => {
            item = JSON.parse(item);
            let obj = {};
            obj.label = item.__config__.label;
            obj.value = item.__vModel__;
            return obj;
          });
          console.log(fields, this.fieldOptions);
        }
      });
    },
    //触发字段选择事件
    updateFieldSelect() {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        fieldValues: this.formData.field,
      });
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        conditionValues: this.formData.condition,
      });
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        inputValues: this.formData.value,
      });
      let field =
        this.formData.field !== undefined && this.formData.field.length > 0
          ? this.formData.field
          : "";
      let condition =
        this.formData.condition !== undefined &&
        this.formData.condition.length > 0
          ? this.formData.condition
          : "";
      let value =
        this.formData.value !== undefined && this.formData.value.length > 0
          ? this.formData.value
          : "";
      let body =
        condition == "containsAny"
          ? "${var:containsAny(" + field + ",'" + value + "')}"
          : condition == "=="
          ? "${" + field + condition + "'" + value + "'}"
          : "${" + field + condition + value + "}";
      let result = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
        body,
      });
      window.bpmnInstances.modeling.updateProperties(
        window.bpmnInstances.bpmnElement,
        {
          conditionExpression: result,
        }
      );
    },
  },
  created() {},
  beforeDestroy() {
    this.bpmnElement = null;
    // this.bpmnElementSource = null;
    // this.bpmnElementSourceRef = null;
  },
};
</script>
<style lang="scss" scoped>
.conditionRadio {
  margin: 0 20px;
  margin-bottom: 20px;

  ::v-deep .el-select {
    width: 100%;
  }
}
.titleConfig {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 600;
  color: #333333;
  margin-bottom: 15px;
}
.childSelect {
  margin-top: 15px;
  .spanOne {
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 600;
    color: #333333;
  }
  box-sizing: border-box;
  padding: 0 20px;
}
::v-deep .el-input-number--medium {
  width: 150px;
  line-height: 34px;
}
.danweiSpan {
  display: inline-block;
  width: 50px;
  box-sizing: border-box;
  padding-left: 10px;
}
</style>
